<template>
  <t-row :gutter="16" class="row-container">
    <t-col :xs="12" :xl="6">
      <t-card :title="$t('pages.dashboardBase.rankList1.title')" class="dashboard-rank-card" :bordered="false">
        <template #actions>
          <t-radio-group default-value="saleItemListTimeRange" variant="default-filled">
            <t-radio-button value="week" @click="setItemVal('week')">{{
              $t('pages.dashboardBase.rankList1.week')
            }}</t-radio-button>
            <t-radio-button value="month" @click="setItemVal('month')">{{
              $t('pages.dashboardBase.rankList1.month')
            }}</t-radio-button>
          </t-radio-group>
        </template>
        <t-table :data="saleItemList" :columns="ITEM_COLUMNS" row-key="goodsName">
          <template #index="{ rowIndex }">
            <span :class="getRankClass(rowIndex)">
              {{ rowIndex + 1 }}
            </span>
          </template>
          <template #operation="slotProps">
            <t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
              $t('pages.dashboardBase.rankList1.info')
            }}</t-link>
          </template>
        </t-table>
      </t-card>
    </t-col>
    <t-col :xs="12" :xl="6">
      <t-card :title="$t('pages.dashboardBase.rankList2.title')" class="dashboard-rank-card" :bordered="false">
        <template #actions>
          <t-radio-group default-value="saleServiceListTimeRange" variant="default-filled">
            <t-radio-button value="week" @click="setServiceVal('week')">{{
              $t('pages.dashboardBase.rankList2.week')
            }}</t-radio-button>
            <t-radio-button value="month" @click="setServiceVal('month')">{{
              $t('pages.dashboardBase.rankList2.month')
            }}</t-radio-button>
          </t-radio-group>
        </template>
        <t-table :data="saleServiceList" :columns="SERVICE_COLUMNS" row-key="goodsName">
          <template #index="{ rowIndex }">
            <span :class="getRankClass(rowIndex)">
              {{ rowIndex + 1 }}
            </span>
          </template>
          <template #operation="slotProps">
            <t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
              $t('pages.dashboardBase.rankList2.info')
            }}</t-link>
          </template>
        </t-table>
      </t-card>
    </t-col>
  </t-row>
</template>

<script setup lang="ts">
import axios from 'axios';
import type { TdBaseTableProps } from 'tdesign-vue-next';
import { onMounted, ref, watch } from 'vue';

import { t } from '@/locales';
import router from '@/router';

const saleItemList = ref([]);
const saleServiceList = ref([]);
const saleItemListTimeRange = ref('week');
const saleServiceListTimeRange = ref('week');

const ITEM_COLUMNS: TdBaseTableProps['columns'] = [
  {
    align: 'center',
    colKey: 'index',
    title: t('pages.dashboardBase.saleColumns.index'),
    width: 80,
    fixed: 'left',
  },
  {
    align: 'left',
    ellipsis: true,
    colKey: 'goodsName',
    title: t('pages.dashboardBase.saleColumns.goodsName'),
    width: 100,
  },
  {
    align: 'center',
    colKey: 'count',
    width: 80,
    title: t('pages.dashboardBase.saleColumns.count'),
  },
  {
    align: 'center',
    colKey: 'money',
    title: t('pages.dashboardBase.saleColumns.money'),
    width: 80,
  },
  {
    align: 'center',
    colKey: 'operation',
    title: t('pages.dashboardBase.saleColumns.operation'),
    width: 80,
    fixed: 'right',
  },
];

const SERVICE_COLUMNS: TdBaseTableProps['columns'] = [
  {
    align: 'center',
    colKey: 'index',
    title: t('pages.dashboardBase.buyColumns.index'),
    width: 80,
    fixed: 'left',
  },
  {
    align: 'left',
    ellipsis: true,
    colKey: 'goodsName',
    width: 100,
    title: t('pages.dashboardBase.buyColumns.goodsName'),
  },
  {
    align: 'center',
    colKey: 'count',
    width: 80,
    title: t('pages.dashboardBase.buyColumns.count'),
  },
  {
    align: 'center',
    colKey: 'money',
    title: t('pages.dashboardBase.buyColumns.money'),
    width: 80,
  },
  {
    align: 'center',
    colKey: 'operation',
    title: t('pages.dashboardBase.buyColumns.operation'),
    width: 80,
    fixed: 'right',
  },
];

const rehandleClickOp = (val: MouseEvent) => {
  console.log(val);
  router.push({
    path: '/shop/goods',
  });
};
const getRankClass = (index: number) => {
  return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
};

const setItemVal = (val: string) => {
  saleItemListTimeRange.value = val;
  console.info(saleItemListTimeRange.value);
};

const setServiceVal = (val: string) => {
  saleServiceListTimeRange.value = val;
  console.info(saleServiceListTimeRange.value);
};
const fetchSaleItemList = async (timeRange: string) => {
  try {
    const response = await axios.get(`/api/admin/sale-item-list?timeRange=${timeRange}`);
    saleItemList.value = response.data.data.list;
    console.log(response);
  } catch (error) {
    console.error('Error fetching sale item list:', error);
  }
};

const fetchSaleServiceList = async (timeRange: string) => {
  try {
    const response = await axios.get(`/api/admin/sale-service-list?timeRange=${timeRange}`);
    saleServiceList.value = response.data.data.list;
  } catch (error) {
    console.error('Error fetching sale service list:', error);
  }
};

onMounted(() => {
  // console.info(saleItemListTimeRange.value);
  fetchSaleItemList(saleItemListTimeRange.value);
  fetchSaleServiceList(saleServiceListTimeRange.value);
});

watch(saleItemListTimeRange, (newVal) => {
  fetchSaleItemList(newVal);
});

watch(saleServiceListTimeRange, (newVal) => {
  fetchSaleServiceList(newVal);
});
</script>

<style lang="less" scoped>
.dashboard-rank-card {
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);

  :deep(.t-card__header) {
    padding: 0;
  }

  :deep(.t-card__title) {
    font: var(--td-font-title-large);
    font-weight: 400;
  }

  :deep(.t-card__body) {
    padding: 0;
    margin-top: var(--td-comp-margin-xxl);
  }
}

.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: var(--td-gray-color-5);
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: var(--td-brand-color);
  }
}
</style>
